<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改用户</title>
	</head>
	<body>
		<div id="app">
			<table>
				<tbody>
					<tr>
						<th style="width: 70px;">
							<label>用户名*</label>
						</th>
						<td style="width: 200px;">
							<input type="text" v-model="paramName" />
						</td>
						<td>
							<span v-if="isShowError" style="color: red;">请输入5个字符</span>
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<button @click="update()">修改</button>
							<button>取消</button>
						</td>
						<td></td>
					</tr>
					<tr>
						<td></td>
						<td><span v-if="isGlobaErrorShow" style="color: red;">修改失败</span></td>
						<td></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="js/vue.js"></script>
		<script src="js/axios.js"></script>
		<script src="js/urlparse.js"></script>
		<script>
			var vue = new Vue({
				el: "#app",
				data: {
					paramName: "",
					isShowError: false,
					isGlobaErrorShow: false
				},
				methods:{
					update: function() {
						
					}
				},
				mounted : function() {
					// 页面初始完成自动调用
					
					// 获得前一个页面传递的参数
					// 通过参数名字获得 参数的值
					var id = getQueryString("name");
					console.log(id);
					
					axios({
						headers: {'content-type': 'application/x-www-form-urlencoded'},
						method: "post",
						url: "http://localhost:8888/simpleweb/userquerybyid",
						data : "id=" + id
					}).then((res) => {
						console.log(res.data);
						
						this.paramName = res.data.name;
					}).catch((error )=> {
						console.log(error);
					});
				}
			});
		</script>
	</body>
</html>